<!--
 * @Author: Li Zengkun
 * @Date: 2022-09-18 17:22:44
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-09-19 14:22:20
 * @Description: 
-->
<template>
  <el-card class="card">
    <div class="row">
      <el-card shadow="hover" class="sub-card first-row">
        <img src="@/assets/img/common/灭霸.svg" alt="" srcset="" />
        <h1>Welcome Back , {{ admin.fullname }}</h1>
        <el-tag>{{ admin.role_name }}</el-tag>
      </el-card>
      <el-card shadow="hover" class="sub-card first-row">
        <img src="@/assets/img/common/钢铁侠.svg" alt="" srcset="" />
        <h1>{{ cardTitle[0] }}</h1>
      </el-card>
    </div>
    <div class="row">
      <el-card
        v-if="cardTitle[1]"
        @click="router.push('/article/list')"
        shadow="hover"
        class="sub-card second-row"
      >
        <img src="@/assets/img/common/绿巨人.svg" alt="" srcset="" />
        <h1>{{ cardTitle[1] }}</h1>
      </el-card>
      <el-card
        v-if="cardTitle[2]"
        @click="router.push('/category/list')"
        shadow="hover"
        class="sub-card second-row"
      >
        <img src="@/assets/img/common/美国队长.svg" alt="" srcset="" />
        <h1>{{ cardTitle[2] }}</h1>
      </el-card>
      <el-card
        v-if="cardTitle[3]"
        @click="router.push('/notice/list')"
        shadow="hover"
        class="sub-card second-row"
      >
        <img src="@/assets/img/common/奇异博士.svg" alt="" srcset="" />
        <h1>{{ cardTitle[3] }}</h1>
      </el-card>
      <el-card
        v-if="cardTitle[4]"
        @click="router.push('/user/list')"
        shadow="hover"
        class="sub-card second-row"
      >
        <img src="@/assets/img/common/黑豹.svg" alt="" srcset="" />
        <h1>{{ cardTitle[4] }}</h1>
      </el-card>
      <el-card
        v-if="cardTitle[5]"
        @click="router.push('/slide/list')"
        shadow="hover"
        class="sub-card second-row"
      >
        <img src="@/assets/img/common/洛基.svg" alt="" srcset="" />
        <h1>{{ cardTitle[5] }}</h1>
      </el-card>
      <el-card
        v-if="cardTitle[6]"
        @click="router.push('/admin/list')"
        shadow="hover"
        class="sub-card second-row"
      >
        <img src="@/assets/img/common/格鲁特.svg" alt="" srcset="" />
        <h1>{{ cardTitle[6] }}</h1>
      </el-card>
      <el-card
        v-if="cardTitle[7]"
        @click="router.push('/admin/info')"
        shadow="hover"
        class="sub-card second-row"
      >
        <img src="@/assets/img/common/蚁人二代.svg" alt="" srcset="" />
        <h1>{{ cardTitle[7] }}</h1>
      </el-card>
    </div>
  </el-card>
</template>
 
<script setup>
import { ref, reactive, computed } from "vue";
import ArticleList from "@/views/Admin/List.vue";
import { useStore } from "vuex";
import { menu, role } from "@/api";
import { useRouter } from "vue-router";

const store = useStore();

const router = useRouter();

// 获取 admin 详细信息
const id = sessionStorage.id;
store.dispatch("Account/loadProfile", id);
const admin = computed(() => {
  return store.state.Account.profile;
});

console.log(id);

const menuList = computed(()=>{
  return store.state.Menu.menu; 
}) 

console.log(store.state.Menu.menu);



const cardTitle = menuList.value.map((item) => item.name);

console.log(cardTitle);
</script>

<style lang='less' scoped>
.card {
  position: relative;
  height: calc(100vh - 100px);
  border-radius: 20px;
  box-sizing: border-box;
  overflow: hidden;
  @media only screen and (max-width: 1024px) {
    flex-wrap: wrap;
    overflow: auto;
  }
  .row {
    display: flex;
    box-sizing: border-box;
    flex-wrap: nowrap;
    justify-content: space-between;
    overflow-x: auto;
    @media only screen and (max-width: 1024px) {
      flex-wrap: wrap;
      overflow-x: hidden;
    }
    .sub-card {
      height: calc((100vh - 140px) / 2);
      border-radius: 12px;
      transition: all 0.3s ease-out;
      color: #fff;
      border: none;
      flex-shrink: 0;

      &.first-row {
        width: calc(50% - 10px);
        h1 {
          font-size: 40px;
        }
        &:first-child {
          background-image: linear-gradient(-45deg, #ce9ffc 10%, #7367f0 100%);
        }
        &:last-child {
          cursor: pointer;
          background: #ed213a; /* fallback for old browsers */
          background: -webkit-linear-gradient(
            135deg,
            #ed213a,
            #93291e
          ); /* Chrome 10-25, Safari 5.1-6 */
          background: linear-gradient(
            135deg,
            #ed213a,
            #93291e
          ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        }
      }
      &.second-row {
        height: calc((100vh - 140px) / 2 - 20px);
        margin-top: 20px;
        width: 300px;
        margin-right: 20px;
        cursor: pointer;
        h1 {
          font-size: 30px;
        }
        &:nth-child(1) {
          background: #52c234; /* fallback for old browsers */
          background: -webkit-linear-gradient(
            135deg,
            #061700,
            #52c234
          ); /* Chrome 10-25, Safari 5.1-6 */
          background: linear-gradient(
            135deg,
            #061700,
            #52c234
          ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        }
        &:nth-child(2) {
          background: #9cecfb; /* fallback for old browsers */
          background: -webkit-linear-gradient(
            135deg,
            #0052d4,
            #65c7f7,
            #9cecfb
          ); /* Chrome 10-25, Safari 5.1-6 */
          background: linear-gradient(
            135deg,
            #0052d4,
            #65c7f7,
            #9cecfb
          ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        }
        &:nth-child(3) {
          background: #0099f7; /* fallback for old browsers */
          background: -webkit-linear-gradient(
            135deg,
            #f11712,
            #0099f7
          ); /* Chrome 10-25, Safari 5.1-6 */
          background: linear-gradient(
            135deg,
            #f11712,
            #0099f7
          ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        }
        &:nth-child(4) {
          background: #000000; /* fallback for old browsers */
          background: -webkit-linear-gradient(
            135deg,
            #434343,
            #000000
          ); /* Chrome 10-25, Safari 5.1-6 */
          background: linear-gradient(
            135deg,
            #434343,
            #000000
          ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        }
        &:nth-child(5) {
          background: #093028; /* fallback for old browsers */
          background: -webkit-linear-gradient(
            135deg,
            #237a57,
            #093028
          ); /* Chrome 10-25, Safari 5.1-6 */
          background: linear-gradient(
            135deg,
            #237a57,
            #093028
          ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        }
        &:nth-child(6) {
          background: #d1913c; /* fallback for old browsers */
          background: -webkit-linear-gradient(
            -45deg,
            #ffd194,
            #d1913c
          ); /* Chrome 10-25, Safari 5.1-6 */
          background: linear-gradient(
            -45deg,
            #ffd194,
            #d1913c
          ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        }
        &:nth-child(7) {
          background: #bdc3c7; /* fallback for old browsers */
          background: -webkit-linear-gradient(
            135deg,
            #2c3e50,
            #bdc3c7
          ); /* Chrome 10-25, Safari 5.1-6 */
          background: linear-gradient(
            135deg,
            #2c3e50,
            #bdc3c7
          ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        }
        img {
          height: 25vh;
          top: 10vh;
        }
      }
      img {
        position: absolute;
        right: 5%;
        top: 40%;
        height: 30vh;
        transition: all 0.2s ease-out;
      }
      &:hover img {
        transform: scale(1.2);
      }
      @media only screen and (max-width: 1024px) {
        &.first-row {
          width: 100%;
          margin-bottom: 20px;
        }
        &.second-row {
          &:first-child {
            margin-top: 0;
          }
          width: 100%;
        }
      }
    }
  }
}
</style>

